iT邦幫忙

2022 iThome 鐵人賽

DAY 6
1
Modern Web

Have fun! 新手也能打造的Javascript微型專案系列 第 6

Have fun! 新手也能打造的Javascript微型專案! Day6: 老是算錢算不清,寫個簡單的計算機用用吧!(上)

  • 分享至 

  • xImage
  •  
tags: ItIron2022 Javascript

前言

從今天開始我們會進入一系列的vanilla javascript專案系列,也就是不透過前端框架或套件,單純利用HTML/CSS/Javascript打造的簡單專案,礙於篇幅的關係,其中許多專案我都會先將UI的部分處理好,在文章內我們就只探討javascript邏輯處理的部分! 一開始前幾天會盡量從簡單一點的專案下手,會需要一點DOM操作的基礎,不用緊張,任何人都能跟上的!

預期成果

我們今天要做的是一個最基礎的計算機,預期的成果如下,樣式也相對簡單,我們這次就專注在邏輯的處理上,篇幅的關係我們今天就僅處理事前規劃的部分。

calculator demo

Getting started

Step1: 專案結構

首先請你先建立一個新的資料夾,裡面包含index.html, style.css & script.js檔案。

專案結構如下圖所示。

folder structure

html檔案請你寫入以下的內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>
<body>
    <div class="calculator">
        <input class="display"></input>
        <div class="btn dark clear">C</div>
        <div class="btn dark sign">+/-</div>
        <div class="btn dark module">%</div>
        <div class="btn operator">/</div>
        <div class="btn number">7</div>
        <div class="btn number">8</div>
        <div class="btn number">9</div>
        <div class="btn operator">x</div>
        <div class="btn number">4</div>
        <div class="btn number">5</div>
        <div class="btn number">6</div>
        <div class="btn operator">-</div>
        <div class="btn number">1</div>
        <div class="btn number">2</div>
        <div class="btn number">3</div>
        <div class="btn operator">+</div>
        <div class="btn zero number">0</div>
        <div class="btn">.</div>
        <div class="btn equal">=</div>
      </div>
</body>
</html>

css檔案則請你寫入以下的內容,js的部份我們暫時先留空白沒關係。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.calculator {
  display: grid;
  width: 340px;
  margin: 0 auto;
  font-size: 40px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(50px, auto);
  border: 0.3px solid #868383;
  border-radius: 3rem;
  padding: 0.8em;
  background-color: #222;
  gap: 10px;
}

.display {
  grid-column: 1/5;
  background-color: lightblue;
  text-align: right;
  padding-right: 20px;
  background-color: #d3d3d3;
  color: #333;
  margin-bottom: 10px;
  border-radius: 16px;
  outline: 0;
  font-size: 36px;
}

.btn {
  border: 1px solid black;
  background-color: #999;
  cursor: pointer;
  border-radius: 40px;
  color: #222;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.2s ease-in;
}

.btn:hover {
  background-color: #868383;
}

.dark {
  background-color: #333;
  color: #ffffff;
}

.operator {
  background-color: #e08d1f;
}

.zero {
  grid-column: 1/3;
}

Step2: 事前規劃

老樣子,請養成動手前先好好思考過一次的習慣,我們今天要做計算功能的話,大致上會需要以下幾個元素。

  • 之前的數字
  • 運算符
  • 現在的數字
  • 一個監聽器去監聽所有的點擊行為

比方說我今天要做1 + 2 = 3,那麼1就是之前的數字,+則是運算符,2則是現在的數字,按下=之後則要將三者合一最終算出3這個結果。

另外有一點你需要注意,在你按下任何運算符之後,畫面上呈現的數字就是現在的數字,之前的數字必須要儲存起來並清空顯示的區塊,我們還需要一個額外的變數來儲存運算符是否點擊過,且運算符的值會是一個函數,因此需要再另一個變數去描述每個運算符對應的運算函數,最終我們需要以下六個元素。

  • 之前的數字
  • 運算符
  • 現在的數字
  • 一個監聽器去監聽所有的點擊行為
  • 紀錄運算符是否點擊過的變數
  • 一個對應運算符與運算函數的物件

理解這些後我們先完成初步的結構,請你將以下的內容寫進script.js內

const displayBar = document.querySelector(".display"); // 顯示結果的元素
const calculator = document.querySelector(".calculator"); // 計算機body

const operatorMapping = {
  "+": (a, b) => a + b,
  "-": (a, b) => a - b,
  "x": (a, b) => a * b,
  "/": (a, b) => a / b,
};

let operatorClicked = false;
let previousResult = "";
let operator;

function handleBtnClick (e) {
    // 暫時留空
}

// 建立監聽器
calculator.addEventListener("click", handleBtnClick);

總結

我們今天先完成了計算機的UI以及js檔案的基本結構處理,在這幾天專案我們節奏會放得稍微慢一些,各位可以放輕鬆一點! 明天就會進入最後的功能實作,你也可以先想一下根據目前的結構你要怎麼實現四則運算的處理!

文章中的範例程式碼可以在這邊取得,歡迎自行取用

轉職Q & A

Danny,我終於把課都上完了! 現在要開始準備進入求職的階段,很多人跟我說履歷上不用放作品集也沒關係,這是真的嗎?

是,但也不是。我並不是在講幹話,但這種情況因人而異,不過假設你是第一次找工程師的工作且你並不是本科系出身,我強烈建議一定要放作品集,否則你沒有任何方式證明你的能力。

履歷上的作品集我個人認為跟學歷一樣,有一定的參考價值但主要還是一個敲門磚,當你有實際的相關工作經歷後是否要放我就覺得可有可無了,至於你要放什麼作品則跟你求職的方向有關係! 一般來說如果是AC的學生我都會建議放一個協作專案、一個全端專案以及一個前/後端專案,我個人並不推薦你直接把課程內的作業當作主打的作品之一,因為這麼一來你的履歷同質性會非常高,你與相同課程出來的同學在履歷上幾乎一致,這麼一來要脫穎而出自然更為困難一些! 花一點時間打造一些獨立的作品對於你的求職會有較為正向的幫助,想要好一點的工作這種工夫我是建議不要省。

本文章同步發布於個人部落格,有興趣的朋友也可以來逛逛~!


上一篇
Have fun! 新手也能打造的Javascript微型專案! Day5: 休息一下! 來個javascript陣列應用大補帖!
下一篇
Have fun! 新手也能打造的Javascript微型專案! Day7: 老是算錢算不清,寫個簡單的計算機用用吧!(下)
系列文
Have fun! 新手也能打造的Javascript微型專案30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言